<template>
  <el-collapse v-model="activeTabNode">
    <el-collapse-item name="ProcessInfo" v-if="elementType === 'Process'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>流程信息</div>
      <process-info ref="processInfo" :id="elementId" :business-object="elementBusinessObject" type="elementType"/>
    </el-collapse-item>
    <el-collapse-item name="BaseInfo" v-if="elementType && elementType !== 'Process'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>节点信息</div>
      <base-info ref="baseInfo" :id="elementId" :business-object="elementBusinessObject" :type="elementType"></base-info>
    </el-collapse-item>
    <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务配置</div>
      <task ref="task" :id="elementId" :business-object="elementBusinessObject" :type="elementType"></task>
    </el-collapse-item>
    <el-collapse-item name="userTaskAssignee" v-if="elementType.indexOf('UserTask') !== -1">
      <div slot="title" class="panel-tab__title"><i class="el-icon-user-solid"></i>审批人配置</div>
      <user-task-assignee ref="task" :id="elementId" :business-object="elementBusinessObject" :type="elementType"></user-task-assignee>
    </el-collapse-item>
    <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>会签配置</div>
      <element-multi-instance ref="multiInstance" :business-object="elementBusinessObject" :type="elementType"/>
    </el-collapse-item>
    <el-collapse-item name="condition" v-if="conditionFormVisible">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
      <flow-condition ref="condition" :business-object="elementBusinessObject" :type="elementType" :conditionAssists="conditionAssists"/>
    </el-collapse-item>
    <el-collapse-item name="flowForm" v-if="elementType === 'UserTask' || elementType === 'StartEvent'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单配置</div>
      <flow-form ref="flowForm" :id="elementId" :business-object="elementBusinessObject" :type="elementType" :forms="forms" :fields="fields"/>
    </el-collapse-item>
    <el-collapse-item name="flowButton" v-if="elementType === 'UserTask'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-tools"></i>按钮配置</div>
      <flow-button ref="flowButton" :id="elementId" :business-object="elementBusinessObject" :type="elementType" :buttons="buttons"></flow-button>
    </el-collapse-item>
    <el-collapse-item name="functions" v-if="elementType === 'UserTask'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-tools"></i>功能配置</div>
      <flow-functions ref="functions" :id="elementId" :business-object="elementBusinessObject" :type="elementType" :functions="functions"></flow-functions>
    </el-collapse-item>
    <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听</div>
      <user-task-listeners ref="taskListeners" :id="elementId" :business-object="elementBusinessObject" :type="elementType" :listeners="taskListeners"/>
    </el-collapse-item>
    <el-collapse-item name="listeners">
      <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听</div>
      <element-listeners ref="listeners" :id="elementId" :business-object="elementBusinessObject" :type="elementType" :listeners="executionListeners"/>
    </el-collapse-item>
    <el-collapse-item name="signalAndMassage" v-if="elementType === 'Process'">
      <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
      <signal-and-massage ref="signalAndMassage"/>
    </el-collapse-item>
    <el-collapse-item name="extensions">
      <div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
      <element-properties ref="extensions" :id="elementId" :type="elementType"/>
    </el-collapse-item>
  </el-collapse>
</template>
<script>

import ProcessInfo from "./processInfo/ProcessInfo";
import BaseInfo from "./baseInfo/BaseInfo"
import Task from "./task/Task"
import UserTaskAssignee from "./task/UserTaskAssignee";
import UserTaskListeners from "./listeners/UserTaskListeners"
import ElementListeners from "./listeners/ElementListeners"
import ElementMultiInstance from "./multiInstance/ElementMultiInstance";
import ElementProperties from "./properties/ElementProperties";
import FlowCondition from "./flowCondition/FlowCondition";
import FlowFunctions from "./functions/FlowFunctions";
import FlowForm from "./flowForm/FlowForm";
import FlowButton from "./flowButton/FlowButton";
import SignalAndMassage from "./signalMessage/SignalAndMessage";
import {deepClone} from "../util/utils";

export default {
  name: "CptPropertiesPanel",
  components: {
    ProcessInfo,
    BaseInfo,
    Task,
    UserTaskAssignee,
    FlowCondition,
    UserTaskListeners,
    ElementListeners,
    ElementMultiInstance,
    ElementProperties,
    FlowFunctions,
    FlowForm,
    FlowButton,
    SignalAndMassage
  },
  props: {
    bpmnModeler: Object,
    prefix: {
      type: String,
      default: "flowable"
    },
    functions: Array,
    forms: Array,
    fields: Array,
    buttons: Array,
    // 任务监听
    taskListeners: {
      type: Array,
      default() {
        return [];
      }
    },
    // 执行监听
    executionListeners: {
      type: Array,
      default() {
        return [];
      }
    },
    conditionAssists: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  inject: {
    prefix: "prefix",
  },
  data() {
    return {
      activeTabNode: "",
      elementId: "",
      elementType: "",
      elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
      conditionFormVisible: false, // 流转条件设置
    };
  },
  created() {
    this.initModels();
  },
  methods: {
    initModels() {
      // 初始化 modeler 以及其他 moddle
      if (!this.bpmnModeler) {
        // 避免加载时 流程图 并未加载完成
        this.timer = setTimeout(() => this.initModels(), 10);
        return;
      }
      if (this.timer) {
        clearTimeout(this.timer);
      }

      this.initActiveElement();
    },
    initActiveElement() {
      // 初始第一个选中元素 bpmn:Process
      this.initFormOnChanged(null);

      // 监听导入完成
      this.bpmnModeler.on("import.done", () => {
        // 初始第一个选中元素 bpmn:Process
        this.initFormOnChanged(null);
      });

      // 选择事件，激活表单
      this.bpmnModeler.on("selection.changed", ({newSelection}) => {
        console.log("selection.changed", newSelection);
        this.initFormOnChanged(newSelection[0] || null);
      });

      // 当元素发生改变事件(包括新增、移动、删除元素)
      this.bpmnModeler.on("element.changed", ({element}) => {
        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
        if (element && element.id === this.elementId) {
          this.initFormOnChanged(element);
        }
      });
    },
    // 初始化数据
    initFormOnChanged(element) {
      // 初始默认选中元素 bpmn:Process
      let activatedElement = element;
      if (!activatedElement) {
        activatedElement = window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process")
            ?? window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
        if (!activatedElement) {
          return;
        }
      }

      // 设置流程实例元素
      window.bpmnInstances.bpmnElement = activatedElement;
      this.bpmnElement = activatedElement;
      this.elementId = activatedElement.id;
      this.elementType = activatedElement.businessObject.$type.split(":")[1] || '';
      this.elementBusinessObject = deepClone(activatedElement.businessObject);

      // 流转条件
      this.conditionFormVisible = !!(
          this.elementType === "SequenceFlow" &&
          activatedElement.source &&
          activatedElement.source.type.indexOf("StartEvent") === -1
      );

      // 默认展开逻辑
      if (["Collaboration", "Process"].includes(this.elementType)) {
        if (!this.activeTabNode.includes("ProcessInfo")) {
          this.activeTabNode = ["ProcessInfo"];
        }
      } else {
        if (this.activeTabNode.includes("ProcessInfo")) {
          this.activeTabNode = ["BaseInfo"];
        }
      }
    },
    beforeDestroy() {
      window.bpmnInstances = null;
    }
  }
};
</script>

<style lang="scss">
@import "index.scss";
</style>
